<template>
    <div id="DDXQcontent">
        <!--        <h1>我是订单详情页面</h1>-->
        <div class="row">
            <!-- 时间线-->
            <div class="part">
                <div class="title">订单时间线</div>
                <el-timeline>
                    <el-timeline-item
                            id="shijianxian"
                            v-for="(activity, index) in activities"
                            :key="index"
                            :icon="activity.icon"
                            :type="activity.type"
                            :color="activity.color"
                            :size="activity.size"
                            :timestamp="activity.timestamp">
                        {{activity.content}}
                    </el-timeline-item>
                </el-timeline>
            </div>
            <div class="xian"></div>
            <div class="part">
                <div class="title">订单信息</div>
                <div>
                    <label for="DDid" class="DDXQlabel">订单编号</label>
                    <input type="text" id="DDid" class="DDXQinput" v-model=newDDifor.orderBaseNumber :disabled=DDid>
                    <!--                    <button class="XIUGAIbtn" @click="XGid">修改</button>-->
                </div>
                <div>
                    <label for="DDstatus" class="DDXQlabel">订单状态</label>
                    <input type="text" id="DDstatus" class="DDXQinput" v-model=newDDifor.orderState :disabled=DDstatus>
                    <!--                    <button class="XIUGAIbtn" @click="XGstatus">修改</button>-->
                </div>
                <div>
                    <label for="productId" class="DDXQlabel">商品编号</label>
                    <input type="text" id="productId" class="DDXQinput" v-model=jyxx.orderDealGoodsId :disabled=productId>
                    <!--                    <button class="XIUGAIbtn" @click="XGproductId">修改</button>-->
                </div>
                <div>
                    <label for="productName" class="DDXQlabel">商品名称</label>
                    <input type="text" id="productName" class="DDXQinput" v-model=productname :disabled=productName>
                    <!--                    <button class="XIUGAIbtn" @click="XGproductName">修改</button>-->
                </div>
                <div>
                    <label for="productNum" class="DDXQlabel">商品数量</label>
                    <input type="text" id="productNum" class="DDXQinput" v-model=productnum :disabled=productNum>
                    <!--                    <button class="XIUGAIbtn" @click="XGproductNum">修改</button>-->
                </div>
            </div>
        </div>

        <div class="row">
            <div class="part">
                <div class="title">交易信息</div>
                <div>
                    <div class="everyitem">
                        <label for="DDjyh" class="DDXQlabel">支付交易号</label>
                        <input type="text" id="DDjyh" class="DDXQinput" v-model=jyxx.orderDealAccount :disabled=DDjyh>
                    </div>
                    <div class="everyitem">
                        <label for="yuanjia" class="DDXQlabel">商品原价</label>
                        <input type="text" id="yuanjia" class="DDXQinput" v-model=shangpingyuanjia :disabled=YuanJia>
                    </div>
                    <div class="everyitem">
                        <label for="youhuijiage" class="DDXQlabel">优惠价格</label>
                        <input type="text" id="youhuijiage" class="DDXQinput" v-model=youhuijiage :disabled=YouHuiJiaGe>
                    </div>
                    <div class="everyitem">
                        <label for="shijizhifu" class="DDXQlabel">实际支付</label>
                        <input type="text" id="shijizhifu" class="DDXQinput" v-model=jyxx.orderDealPayReal :disabled=ShiJiZhiFu>
                    </div>
<!--                    <div class="everyitem">-->
<!--                        <label for="zhifufangshi" class="DDXQlabel">支付方式</label>-->
<!--                        <input type="text" id="zhifufangshi" class="DDXQinput" v-model=dingdan :disabled=ZhiFuFangShi>-->
<!--                    </div>-->
                    <div class="everyitem">
                        <label for="zhifushijian" class="DDXQlabel">支付时间</label>
                        <input type="text" id="zhifushijian" class="DDXQinput" v-model=jyxx.orderDealCreatTime :disabled=ZhiFuShiJian>
                    </div>
                    <div class="everyitem">
                        <label for="zhifuliushui" class="DDXQlabel">支付流水号</label>
                        <input type="text" id="zhifuliushui" class="DDXQinput" v-model=jyxx.orderDealNum :disabled=ZhiFuLiuShui>

                    </div>

                </div>
            </div>
            <div class="xian"></div>
            <!-- 快递信息-->
            <div class="part">
                <div class="title">快递信息</div>
                <div>
                    <label for="kuaididanhao" class="DDXQlabel">快递单号</label>
                    <input type="text" id="kuaididanhao" class="DDXQinput" v-model=KDDH :disabled=kuaididanhao>
                </div>
                <div>
                    <label for="kuaidigongsi" class="DDXQlabel">快递公司</label>
                    <input type="text" id="kuaidigongsi" class="DDXQinput" v-model=KDGS :disabled=kuaidigongsi>
                </div>
                <div>
                    <label for="youjifeiyong" class="DDXQlabel">邮寄费用</label>
                    <input type="text" id="youjifeiyong" class="DDXQinput" v-model=YJFY :disabled=youjifeiyong>
                </div>
                <div>
                    <label for="shrxm" class="DDXQlabel">收货人姓名</label>
                    <input type="text" class="DDXQinput" id="shrxm" v-model=SHRXM :disabled=shrxm @blur="xgshrxm">
                    <button class="XIUGAIbtn" @click="XGshrxm">修改</button>
                </div>
                <div>
                    <label for="shrdz" class="DDXQlabel">收货人地址</label>
                    <input type="text" class="DDXQinput" id="shrdz" v-model=SHRDZ :disabled=shrdz @blur="xgshrdz">
                    <button class="XIUGAIbtn" @click="XGshrdz">修改</button>
                </div>
                <div>
                    <label for="shrdh" class="DDXQlabel">收货人电话</label>
                    <input type="text" class="DDXQinput" id="shrdh" v-model=SHRDH :disabled=shrdh @blur="xgshrdh">
                    <button class="XIUGAIbtn" @click="XGshrdh">修改</button>
                </div>
            </div>
        </div>
        <div style="display:flex;justify-content: space-between;background-color: white">
            <button class="btn" @click="QRFH">确认发货</button>
            <button class="btn" @click="TJXG">提交修改</button>
            <button class="btn" @click="TKCL">退款处理</button>
            <button class="btn" @click="LYHF">留言回复</button>
        </div>
        <!-- 退款弹框-->
        <el-dialog
                title="退款处理"
                :visible.sync="TKCLdialog"
                width="40%"
                :before-close="handleClose">
            <div id="tankuangContent">
                <div style="width: 100%;">
                    <div style="margin: 10px 0">
                        <label class="tankuangoption">退款路径</label>
                        <template>
                            <el-select v-model="value" placeholder="请选择" size="mini">
                                <el-option

                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </div>
                    <div style="margin-bottom: 10px">
                        <label class="tankuangoption">退款金额:</label>
                        500￥
                    </div>
                    <div style="display: flex">
                        <div>
                            <label class="tankuangoption">退款原因:</label>
                        </div>
                        <div>
                            <textarea style="resize: none;width: 187px;height: 80px"></textarea>
                        </div>
                    </div>
                </div>
                <div class="tankuangxian"></div>
                <div style="width: 100%">
                    <label class="tankuangoption">历史退款记录</label>
                    <el-table
                            :header-cell-style="{
                                                        'background-color': '#4399DC',
                                                        'color': 'white',
                                                        'text-align':'center'

                                                     }"
                            :cell-style="{
                                                        'text-align':'center'
                                                     }"
                            :data="tableData"
                            border
                            style="width: 100%">
                        <el-table-column
                                prop="date"
                                label="退款时间">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="退款金额">
                        </el-table-column>
                        <el-table-column
                                prop="province"
                                label="操作人员">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="TKCLdialog = false">取 消</el-button>
                <el-button type="primary" @click="TKQR">确 定</el-button>
            </span>
        </el-dialog>
        <!--留言回复-->
        <el-dialog
                title="留言回复"
                :visible.sync="LYHFdialog"
                width="40%"
                :before-close="handleClose1">
            <!-- <<<<对话框的风格>>>>这是留言回复的蓝色框区域-->
            <!--            <div style="border: 3px solid #4399DC;padding: 10px;background-color: #e6e6e6">-->
            <!--                &lt;!&ndash;这是上面的对话区域&ndash;&gt;-->
            <!--                <div id="textcontent" >-->
            <!--                    <div v-for="item in buyerdialog">-->
            <!--                        <div class="HFSJ">{{item.time}}</div>-->
            <!--                        <div>-->
            <!--                            <span id="buyerperson">{{item.person}}: </span>-->
            <!--                            <span id="buyersay">{{item.say}}</span>-->
            <!--                        </div>-->
            <!--                    </div>-->
            <!--                    <div v-for="item in salerdialog">-->
            <!--                        <div class="HFSJ">{{item.time}}</div>-->
            <!--                        <div class="salertext">-->
            <!--                            <div id="Mysay">{{item.say}}</div>-->
            <!--                            <div id="Myperson">:{{item.person}}</div>-->
            <!--                        </div>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--                &lt;!&ndash;这是下面的输入消息和发送消息区域&ndash;&gt;-->
            <!--                <div>-->
            <!--                    <textarea style="resize: none;width: 99%;height: 80px;margin-top: 30px" v-model="minetext"></textarea>-->
            <!--                    <button @click="fasongtext" class="fasongbtn">发送</button>-->
            <!--                </div>-->
            <!--            </div>-->
            <div style="border: 3px solid #4399DC;padding: 10px;background-color: #e6e6e6" id="textcontent">
                <el-table
                        :header-cell-style="{
                                                        'background-color': '#3899FF',
                                                        'color': 'white',
                                                        'text-align':'center'

                                                     }"
                        :cell-style="{
                                                        // 'text-align':'center'
                                                     }"
                        :data="lyhfText"
                        border
                        style="width: 100%">
                    <el-table-column
                            width="100px"
                            prop="time"
                            label="时间">
                    </el-table-column>
                    <el-table-column
                            width="80px"
                            prop="userName"
                            label="操作人">
                    </el-table-column>
                    <el-table-column
                            prop="message"
                            label="内容">
                    </el-table-column>
                </el-table>
            </div>
            <div>
                <textarea style="resize: none;width: 99%;height: 80px;margin-top: 30px" v-model="minetext"></textarea>
                <button @click="fasongtext" class="fasongbtn">发送</button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import http from '../../tool/http'
    import API from '../../tool/api'

    export default {
        name: "mxl_ddxq",
        data() {
            return {
                //时间线
                activities: [
                    {
                        content: '订单提交',
                        timestamp: '2018-04-12 20:46',
                        size: 'large',
                        type: 'primary',
                        icon: 'el-icon-more'
                    },
                    {
                        content: '已发货',
                        timestamp: '2018-04-03 20:46',
                        color: '#0bbd87'
                    },
                    {
                        content: '为收货',
                        timestamp: '2018-04-03 20:46',
                        size: 'large'
                    },
                    {
                        content: '未完成',
                        timestamp: '2018-04-03 20:46'
                    }
                ],
                dingdan: 123654,
                //订单信息
                DDid: true,
                DDstatus: true,
                productId: true,
                productName: true,
                productname:'',//这个是通过baseId查询后返回的数据，用这个去装一下商品名称
                productNum: true,
                productnum:'',//这个是通过baseId查询后返回的数据，用这个去装一下商品数量
                newDDifor:{},//这个是通过baseId查询后返回的数据，用这个去装一下所有的快递信息
                //交易信息
                DDjyh: true,
                YuanJia: true,
                shangpingyuanjia:'23',
                YouHuiJiaGe: true,
                youhuijiage:'10',
                ShiJiZhiFu: true,
                // ZhiFuFangShi: true,
                ZhiFuShiJian: true,
                ZhiFuLiuShui: true,

                jyxx:{},//这个是通过baseId查询后返回的数据，用这个去装一下所有的信息
                //快递信息、
                kuaididanhao: true,
                kuaidigongsi: true,
                youjifeiyong: true,
                shrxm: true,
                shrdz: true,
                shrdh: true,
                KDDH: 'KDDH202005131601434006',//快递单号
                KDGS: '东风快递',//快递公司
                YJFY: '32',//邮寄费用
                SHRXM: '',//收货人姓名
                SHRDZ: '',//收货人地址
                SHRDH: '',//收货人电话
                //退款弹出框
                TKCLdialog: false,
                options: [
                    {
                        value: '1',
                        label: '原路退款',

                    },
                    {
                        value: '2',
                        label: '非原路退款',
                    }
                ],
                value: '',
                tableData: [
                    {
                        date: '2016-05-02',
                        name: '王小虎',
                        province: '上海',
                    },
                    {
                        date: '2016-05-04',
                        name: '王小虎',
                        province: '上海',
                    }
                ],
                //留言回复
                LYHFdialog: false,
                lyhfText: [
                    // {
                    //     time: new Date().toLocaleString(),
                    //     person: '王小虎',
                    //     say: '今天要退款',
                    // },
                    // {
                    //     time: new Date().toLocaleString(),
                    //     person: '系统',
                    //     say: '不行,滚',
                    // },
                ],
                // buyerdialog: [
                //     {person: '张三', say: '今天要退款', time: new Date().toLocaleString()},
                //     {person: '李斯', say: '今天要退款2222', time: new Date().toLocaleString()},
                //
                // ],
                // salerdialog: [
                //     {person: 'saler', say: '不行,滚', time: new Date().toLocaleString()},
                // ],
                minetext: '',
                guanliyuanName:'管理员-ldp',
                // isActive: false,
            };
        },
        methods: {
            XGshrxm() {
                this.shrxm = false
            },
            xgshrxm() {
                this.shrxm = true
            },
            XGshrdz() {
                this.shrdz = false
            },
            xgshrdz() {
                this.shrdz = true
            },
            XGshrdh() {
                this.shrdh = false
            },
            xgshrdh(){
                this.shrdh=true
            },
            TJXG() {
                // console.log(this.SHRDZ)
                // console.log(this.KDDH)
                // console.log(this.SHRDH)
                // console.log(this.SHRXM)
                http({
                    url: API.XGKDXX,
                    method: 'post',
                    data: {
                        "orderDeliveryAddress": this.SHRDZ,
                        "orderDeliveryNum": this.KDDH,
                        "orderDeliveryTel": this.SHRDH,
                        "orderDeliveryName":this.SHRXM
                    },
                }).then(resp => {
                    console.log(resp)
                    resp.data.data.orderDeliveryName=this.SHRXM
                })

            },
            //退款处理
            TKCL() {
                this.TKCLdialog = true

            },
            handleClose() {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });

            },
            TKQR() {
                this.$confirm('确认退款？')
                    .then(_ => {
                        this.TKCLdialog = false
                        http({
                            url:API.TK,
                            method:'post',
                            params:{orderBaseId:1},
                        }).then(resp=>{
                            console.log(resp)
                        })
                    })
                    .catch(_ => {
                    });
            },
            //留言回复
            LYHF() {
                this.LYHFdialog = true
                http({
                    url: API.DDLTJL,
                    method: 'post',
                    params:{orderBaseId:1},
                }).then(resp => {
                    console.log(resp.data.data)
                    resp.data.data.map(item=>{
                        item.time=item.time.split('.')[0];
                        item.time=item.time.replace('-0','/')
                        item.time=item.time.replace('-','/')
                        item.time=item.time.replace('T','/')
                        // console.log(item.time)
                    })

                    this.lyhfText=[...resp.data.data]
                    // console.log(this.lyhfText)
                })

            },
            handleClose1() {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.LYHFdialog=false
                    })
                    .catch(_ => {
                    });

            },
            fasongtext() {
                // this.salerdialog.push({person: 'saler', say: this.minetext, time: new Date().toLocaleString()});
                this.lyhfText.push({userName: this.guanliyuanName, message: this.minetext, time: new Date().toLocaleString('chinese', { hour12: false })})


                //这里需要把留言的内容发送给后端
                http({
                    url:API.DDHF,
                    method:'post',
                    data:{
                        "orderBaseId":1,
                        "orderReplyBackUserId":1,
                        "orderReplyBackName": this.guanliyuanName,
                        "orderReply": this.minetext,
                    }
                }).then(resp=>{
                    console.log(resp)
                })

                this.minetext = '';
                //这里是实现点击发送按钮以后，滚动条保持在最底部
                this.$nextTick(function () {
                    let div = document.getElementById('textcontent');
                    div.scrollTop = div.scrollHeight;
                })
            },
            //确认发货按钮，点击产生订单号
            QRFH() {
                http({
                    url: API.CJKDBD,
                    method: "post",
                    data: {
                        "orderDeliveryAddress": "四川省成都市国信安教育基地",
                        "orderDeliveryBaseNum": "DDBH202005112021314606",
                        "orderDeliveryCompany": "顺丰",
                        "orderDeliveryName": "ldp",
                        "orderDeliveryNum": null,
                        "orderDeliveryTel": "1355555"
                    },
                }).then((resp) => {
                    // console.log(resp)
                    if (resp.status === 200) {
                        this.KDGS = '顺丰'
                        this.KDDH = resp.data.data.orderDeliveryNum;//快递单号
                        this.YJFY = '32'//邮寄费用
                        this.SHRXM = resp.data.data.orderDeliveryName;//收货人姓名
                        this.SHRDZ = resp.data.data.orderDeliveryAddress;//收货人地址
                        this.SHRDH = resp.data.data.orderDeliveryTel;//收货人电话
                    }
                })
            },
        },
        created() {
            // console.log(this.$store.state.mxl_ddgl.vuex_mxlddgl_orderBaseId)
            let mxlddgl_orderBaseId = this.$store.state.mxl_ddgl.vuex_mxlddgl_orderBaseId
            http({
                url:API.CXXQ,
                method:'post',
                params:{orderBaseId:mxlddgl_orderBaseId},
            }).then(resp=>{
            console.log(resp)
                this.newDDifor={...resp.data.data.orderBase}
                this.SHRDH=this.newDDifor.orderBaseTel
                this.SHRXM=this.newDDifor.orderBaseName//收货人姓名
                this.SHRDZ=this.newDDifor.orderBaseAddress//收货人地址
                this.productname=resp.data.data.goodsName//商品名称
                this.productnum=resp.data.data.orderDeal.orderDealCount//商品数量
                this.jyxx={...resp.data.data.orderDeal}
            })
        }
    }
</script>

<style scoped>

    #DDXQcontent {
        /*border: 3px solid crimson;*/
        background-color: #F1F3F7;
    }

    .row {
        width: 100%;
        display: flex;
        justify-content: center;
        /*border: 3px solid red;*/
        margin-bottom: 20px;
        background-color: white;
    }

    .xian {
        /*width: 1px ;*/
        border-right: 1px solid #3899FF;
        margin: 30px 150px;
    }

    .part {
        /*border: 1px solid chartreuse;*/
        width: 450px;
        /*text-align: center;*/
    }

    .title {
        color: #3899FF;
        margin: 25px 0;
        font-size: 20px;
        text-align: center;
    }

    .DDXQlabel {
        display: inline-block;
        width: 100px;
        height: 22px;
        line-height: 22px;
        /*border: 1px solid red;*/
        text-align: left;
        margin: 10px 10px;

    }

    .DDXQinput {
        width: 191px;
        border: 1px solid #DCDFE6;
        height: 24px;
        border-radius: 5px;
        outline: none;
    }

    .everyitem {
        /*width: 500px;*/
        /*border: 1px solid cyan;*/
        text-align: center;
    }

    #shijianxian {
        width: 180px;
        margin: 0 auto;
        /*text-align: center;*/
        /*border: 1px solid cadetblue;*/
    }

    /*按钮的类*/
    .XIUGAIbtn {
        border: none;
        background-color: #3899FF;
        width: 50px;
        height: 30px;
        border-radius: 5px;
        color: white;
        font-size: 14px;
        margin-left: 30px;
    }

    .btn {
        border: none;
        background-color: #3899FF;
        width: 80px;
        height: 30px;
        border-radius: 5px;
        /*margin-left: 85%;*/
        color: white;
        margin: 30px auto;
    }

    /*退款处理弹出框*/
    #tankuangContent {
        /*border: 1px solid red;*/
        display: flex;
        justify-content: center;
    }

    .tankuangoption {
        display: inline-block;
        /*width: 100px;*/
        height: 22px;
        line-height: 22px;
        /*border: 1px solid red;*/
        text-align: left;
        margin: 0 10px;
        color: #3899FF;

    }

    .tankuangxian {
        border-right: 1px solid #3899FF;
        margin: 0 30px;
    }

    /*!*留言回复*!*/
    /*.HFSJ {*/
    /*    width: 180px;*/
    /*    margin: 5px auto;*/
    /*    text-align: center;*/

    /*}*/
    /*.salertext{*/
    /*    font-size: 16px;*/
    /*    display: flex;*/
    /*   justify-content: flex-end;*/
    /*}*/
    /*#buyerperson{*/
    /*    font-size: 16px;*/
    /*    color: #4399DC;*/
    /*}*/
    /*#buyersay{*/
    /*    font-size: 16px;*/
    /*    background-color: white;*/
    /*    border-radius: 5px;*/
    /*    padding:2px 10px;*/
    /*}*/
    /*#Mysay{*/
    /*    text-align: left;*/
    /*    background-color: white;*/
    /*    border-radius: 5px;*/
    /*    padding: 2px 10px;*/

    /*}*/
    /*#Myperson{*/
    /*    word-break: normal;*/
    /*    color: #4399DC;*/
    /*    padding-left: 2px;*/

    /*}*/
    .fasongbtn {
        border: none;
        background-color: #3899FF;
        width: 80px;
        height: 30px;
        border-radius: 5px;
        color: white;
        margin-left: 85%;
        margin-top: 15px;
        margin-bottom: 15px;

    }

    #textcontent {
        /*width: 100%;*/
        overflow-y: scroll;
        height: 200px
    }

    #textcontent::-webkit-scrollbar { /*滚动条整体样式*/
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
</style>